<!-- 管理优惠券 -->
<template>
  <div class='bgff h100 pd pt10 dfgfdgtrt'>
    <p class="title-label">优惠券管理</p>

    <div class="mt20 sdfgdgdfyt">
      <n-form ref="formRef" :model="form" :rules="rules" label-placement="left" label-width="120px"
        require-mark-placement="right-hanging" size="medium" :style="{
        }">
        <n-grid :cols="24" :x-gap="20">
          <n-form-item-gi span="24" label="优惠券名称:" path="name">
            <n-input v-model:value="form.name" type="text" placeholder="请输入优惠券名称" size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="优惠券面值:" path="couponFaceValue">
            <n-input-number v-model:value="form.couponFaceValue" placeholder="请输入优惠券名称" size="medium"
              clearable></n-input-number>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="使用门槛:">
            <div class=" display-flex">
              <div class=" vertical-center dsfcxcsdtrett">
                <n-radio-group v-model:value="isxs" name="radiogroup" @change="jmcxxzcd">
                  <n-space>
                    <n-radio value="1">无门槛 </n-radio>
                    <n-radio value="2">有门槛 </n-radio>
                  </n-space>
                </n-radio-group>
              </div>
              <div class=" flex-1 ml10" v-if="isxs == '2'">
                <n-input-number v-model:value="form.mkval" type="text" placeholder="" size="medium"
                  clearable></n-input-number>
              </div>
              <div class="z9 fz12 vertical-center ml10" v-if="isxs == '2'">
                填写优惠券的最低消费金额
              </div>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="使用时间:">
            <div class=" display-flex">
              <div class=" vertical-center dsfcxcsdtrett">
                <n-radio-group v-model:value="form.sylx" name="radiogroup">
                  <n-space>
                    <n-radio value="1">天数 </n-radio>
                    <n-radio value="2">时间段 </n-radio>
                  </n-space>
                </n-radio-group>
              </div>
              <div class=" display-flex flex-1" v-if="form.sylx == '1'">
                <div class=" flex-1">
                  <n-input-number v-model:value="form.shnssd" placeholder="" size="medium" />
                </div>
                <div class=" vertical-center ml10">
                  领取后多少天内有效
                </div>
              </div>
              <div class=" display-flex flex-1" v-if="form.sylx == '2'">
                <div class=" flex-1">
                  <n-date-picker start-placeholder='领取后在这个时间段内可以使用' v-model:value="datesier" type="datetimerange"
                    clearable />
                </div>

              </div>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="状态:">
            <div class=" display-flex">
              <div class=" vertical-center dsfcxcsdtrett">
                <n-radio-group v-model:value="form.state" name="radiogroup">
                  <n-space>
                    <n-radio value="1">开启 </n-radio>
                    <n-radio value="2">关闭 </n-radio>
                  </n-space>
                </n-radio-group>
              </div>
            </div>
          </n-form-item-gi>


          <n-form-item-gi span="24" label="&nbsp;" class="mt20 pm20">
            <n-button type="primary" :loading="baozd" size="medium" @click="baocun">
              {{ isbj?'立即修改':'立即创建' }}
              </n-button>
            <n-button size="medium" class="ml20" @click="callBack">返回上一页</n-button>
          </n-form-item-gi>


        </n-grid>
      </n-form>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref, nextTick } from "vue"
import { dxget, dxpost, callBack, qurl, transferTimeYMDHm } from "../../../util/index";
const isxs = ref('1')
const datesier = ref()
const cz = qurl()
const baozd = ref(false)
const formRef = ref()
const apiUrl = "yuyue/discountCoupon"
const isbj = ref(false)

const initData = async () => {
  const { data }: any = await dxget(apiUrl, { id: cz.id })
  if(data.mkval>0){
    isxs.value = '2'
  }
  if(data.sylx=="2"){
    datesier.value= [new Date(data.startOfUseTime).getTime(),new Date(data.endOfUseTime).getTime()]
    console.log(datesier.value);
  }
  form.value = data
}



if (cz.id) {
  isbj.value = true
  initData()
}

const form = ref({
  name: "", // 优惠券名称
  couponFaceValue: "", // 优惠券面值
  mkval: 0,//使用门槛  0为无门槛 否则为有门槛
  sylx: "1",//使用类型1.天数计算  2时间段
  shnssd: 1, // 
  startOfUseTime: "",//优惠券使用开始时间
  endOfUseTime: "",//优惠券使用结束时间
  state: '1' //优惠券的状态 1开启 2关闭
})

const rules = {
  name: {
    required: true,
    message: '请输入优惠券名称',
    trigger: 'blur'
  },
}
const jmcxxzcd = (data) => {
  if (isxs.value == "1") {
    form.value.mkval = 0
  }

}
const baocun = async () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      if (!form.value.couponFaceValue) {
        window.$message.error("请输入优惠券面值")
        return
      }
      console.log(form.value.sylx);
      if (form.value.sylx == '2') {
        if (!datesier.value) {
          window.$message.error("请选择使用时间段")
          return
        }
        form.value.startOfUseTime = transferTimeYMDHm(datesier.value[0])
        form.value.endOfUseTime = transferTimeYMDHm(datesier.value[1])
      }
      const { data }: any = await dxpost(apiUrl, form.value, isbj.value ? 'put' : 'post')
      window.$message.success("操作成功！")
      callBack()
    }
  })
}
</script>
<style scoped>
.sdfgdgdfyt {
  width: 800px;
}

.dsfcxcsdtrett {
  height: 40px;
}
</style>